import { MapPin, Phone, Mail } from 'lucide-react';

export const MapComponent = () => {
  return (
    <div className="w-full h-[400px] rounded-lg overflow-hidden shadow-md bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
      <div className="text-center p-8">
        <MapPin className="h-16 w-16 text-[#0e4c92] mx-auto mb-4" />
        <h3 className="text-xl font-semibold text-gray-900 mb-2">
          Visit Our Office
        </h3>
        <p className="text-gray-600 mb-4">
          123 Healthcare Avenue<br />
          Medical District, NY 10001
        </p>
        <div className="space-y-2 text-sm text-gray-600">
          <div className="flex items-center justify-center">
            <Phone className="h-4 w-4 mr-2" />
            <span>(555) 123-4567</span>
          </div>
          <div className="flex items-center justify-center">
            <Mail className="h-4 w-4 mr-2" />
            <span>contact@med-select-hub.com</span>
          </div>
        </div>
        <p className="text-xs text-gray-500 mt-4">
          Interactive map available with valid API configuration
        </p>
      </div>
    </div>
  );
};